<template>
  <div class="header">
    <!-- 小开关 -->
    <div class="sliderComponent">
      <slot></slot>
    </div>
    <!-- 面包屑 -->
    <brea-crumb></brea-crumb>
    <!-- 小宠物加全屏 -->
    <pet></pet>

    <!-- 小头像 -->
    <div class="avatar">
      <div class="loader">
        <div class="face">
          <div class="circle"></div>
        </div>
        <div class="face">
          <div class="circle"></div>
        </div>
      </div>
      <el-avatar :src="store.state.BaseUrl + store.state.globalAvatarUrl" :size="50"></el-avatar>
      <div class="avatarItem">
        <div class="item" @click="handleBlack">退出登录</div>
        <div class="item" @click="handleGoCenter"> {{ store.state.globalUsername }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { inject, defineAsyncComponent } from 'vue'

const BreaCrumb = defineAsyncComponent(() => import('../header/BreaCrumb.vue'))

const Pet = defineAsyncComponent(() => import('../header/Pet.vue'))

// 头像
const store: any = inject('store')
// 退出登录事件
const router = useRouter()
const handleBlack = function () {
  localStorage.removeItem('token')
  router.push({ name: 'login' })
}
// 跳转到个人修改信息页面
const handleGoCenter = function () {
  router.push({ name: 'center' })
}
</script>

<style lang="scss">
.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}


.avatar {
  position: absolute;
  top: 5px;
  width: 50px;
  height: 50px;
  right: 20px;
  cursor: pointer;
  translate: all 0.3s;

  &:hover .avatarItem {
    max-height: 500px;
  }

  // 下面是头像外面的小光环
  .loader {
    width: 60px;
    height: 60px;
    font-size: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate023845 3s linear infinite;
  }

  .loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: gold;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
  }

  .loader .face:nth-child(2) {
    width: 100%;
    height: 100%;
    color: lime;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
  }

  .loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
  }

  .loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em,
      0 0 0 0.5em rgba(255, 255, 0, 0.1);
  }

  @keyframes animate023845 {
    to {
      transform: rotate(1turn);
    }
  }
}

.avatarItem {
  position: absolute;
  top: 60px;
  right: -30px;
  z-index: 999;
  max-height: 0px;
  background: #fff;
  overflow: hidden;
  transition: all 1s;
  border-radius: 10px;



  .item {
    height: 50px;
    width: 100px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    line-height: 50px;
  }


}
</style>